<template>
  <Table
    :tableData="tableData"
    :selectedTable="selectedTable"
    :heads="ActivityTableHeads"
    :headMap="activityTableMap"
    :isExportTable="false"
  >
    <el-table-column label="操作" width="240" align="center">
      <template #default="scope">
        <div class="operation">
          <span @click="handleEdit(scope.$index, scope.row)">编辑</span>
          <span class="preview" @click="handlePreview(scope.$index, scope.row)"
            >预览</span
          >
          <span class="delete" @click="handleDelete(scope.$index, scope.row)"
            >删除</span
          >
        </div>
      </template>
    </el-table-column>
  </Table>
</template>

<script lang="ts" setup>
import { ActivityTableHeads } from "@/data/tableConfig.ts";
import { activityTableMap } from "@/data/tableMap.ts";

import Table from "@/components/common/Table.vue";

interface IActivityTable {
  activityName: string;
  activityIntro: string;
  needArrive: number;
  arrive: number;
  host: string;
  recorder: string;
  activityTime: string;
  organization: string;
  [key: string]: any;
}

const props = defineProps(["tableData", "selectedTable"]);
const emits = defineEmits(["edit", "delete", "preview", "upload"]);

const handleEdit = (index: number, row: IActivityTable) => {
  console.log(index, row);
  emits("edit", row);
};

const handlePreview = (index: number, row: IActivityTable) => {
  console.log(index, row);
  emits("preview", row);
};

const handleDelete = (index: number, row: IActivityTable) => {
  console.log(index, row);
  emits("delete", row);
};
</script>

<style lang="less" scoped>
.mytable {
  p {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }

  .operation {
    display: flex;
    align-items: center;
    justify-content: center;

    span {
      color: #3f85ed;
      cursor: pointer;
      margin-right: 20px;
    }

    span:last-child {
      margin-right: 0;
    }

    .moveup-text,
    .movedown-text {
      color: #666;
    }

    .delete-text {
      margin-left: 20px;
    }

    .move {
      display: inline-flex;
      flex-direction: column;
      font-size: 16px;
      margin-left: 8px;
    }
  }
}

:deep(.el-dialog_body) {
  height: 40vh;
  overflow: auto;
}
</style>
